import {AfterViewInit, Component, ElementRef, OnInit} from '@angular/core';

@Component({
  selector: 'app-arc-chart',
  templateUrl: './arc-chart.component.html',
  styleUrls: ['./arc-chart.component.css']
})
export class ArcChartComponent implements OnInit, AfterViewInit {

  constructor(private elementRef: ElementRef) { }

  ngOnInit() {
  }

  ngAfterViewInit(): void {
    var Highcharts = (<any>window)['Highcharts'];
    var renderer = new Highcharts.Renderer(
      this.elementRef.nativeElement,
      400,
      300
    );
    renderer.arc(100,100, 100, 75, -Math.PI/2, 0).attr({
      fill: 'red',
      stroke: 'yellow',
      'stroke-width': 1
    }).add().on('click', function(){
      alert(444);
    });
    renderer.text('Series', 140, 140).attr({
      rotation: 50,translateX:13,translateY:-110}).add();
    renderer.arc(100,100, 100, 75, -Math.PI, -Math.PI/2).attr({
      fill: 'green',
      stroke: 'yellow',
      'stroke-width': 1
    }).add();
    renderer.arc(100,100, 100, 75, -3*Math.PI/2, -Math.PI).attr({
      fill: 'blue',
      stroke: 'yellow',
      'stroke-width': 1
    }).add();
    renderer.arc(100,100, 100, 75, -2*Math.PI, -Math.PI*3/2).attr({
      fill: 'pink',
      stroke: 'yellow',
      'stroke-width': 1
    }).add();
    renderer.arc(100,100, 75, 50, -Math.PI/2, 0).attr({
      fill: 'red',
      stroke: 'yellow',
      'stroke-width': 1
    }).add();
    renderer.arc(100,100, 75, 50, -Math.PI, -Math.PI/2).attr({
      fill: 'green',
      stroke: 'yellow',
      'stroke-width': 1
    }).add();
    renderer.arc(100,100, 75, 50, -3*Math.PI/2, -Math.PI).attr({
      fill: 'blue',
      stroke: 'yellow',
      'stroke-width': 1
    }).add();
    renderer.arc(100,100, 75, 50, -2*Math.PI, -Math.PI*3/2).attr({
      fill: 'pink',
      stroke: 'yellow',
      'stroke-width': 1
    }).add();
    renderer.arc(100,100, 50, 25, -Math.PI/2, 0).attr({
      fill: 'red',
      stroke: 'yellow',
      'stroke-width': 1
    }).add();
    renderer.arc(100,100, 50, 25, -Math.PI, -Math.PI/2).attr({
      fill: 'green',
      stroke: 'yellow',
      'stroke-width': 1
    }).add();
    renderer.arc(100,100, 50, 25, -3*Math.PI/2, -Math.PI).attr({
      fill: 'blue',
      stroke: 'yellow',
      'stroke-width': 1
    }).add();
    renderer.arc(100,100, 50, 25, -2*Math.PI, -Math.PI*3/2).attr({
      fill: 'pink',
      stroke: 'yellow',
      'stroke-width': 1
    }).add();
  }
}
